<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<body>
    <header class="aui-bar aui-bar-nav" id="aui-header">
        <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">审批</div>
    </header>
    <div class="aui-tab" id="tab">
        <div class="aui-tab-item aui-active">添加工作</div>
        <div class="aui-tab-item">待我审批</div>
        <div class="aui-tab-item">我提交的</div>
        <div class="aui-tab-item">抄送给我</div>
    </div>
</body>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-tab.js" ></script>
<script type="text/javascript">
    var header = $api.byId('aui-header');
    var headerPos = $api.offset(header);
    var headerTab = $api.byId('tab');
    var headerTabPos = $api.offset(headerTab);

    var tab = new auiTab({
        element:document.getElementById("tab"),
    },function(ret){
        api.setFrameGroupIndex({
            name: 'work-group',
            index: ret.index - 1,
            scroll: true
        });
      //console.log(JSON.stringify(ret))
    });

    apiready = function(){
        api.parseTapmode();
        var header = $api.byId('aui-header');
        $api.fixStatusBar(header);
        var headerPos = $api.offset(header);
        var body_h = $api.offset($api.dom('body')).h;
        /*api.openFrame({
            name: 'workflow_frm',
            url: 'workflow_frm.html',
            bounces: true,
            rect: {
                x: 0,
                y: headerPos.h,
                w: 'auto',
                h: 'auto'
            }
        })*/
        openFirstFramegroup(frames);
    };


    function openFirstFramegroup(frames){
        api.openFrameGroup({
        name: 'work-group',
        background: '#fff',
        scrollEnabled: true,
        rect: {
            x: 0,
            y: headerPos.h+headerTabPos.h+20,
            w: 'auto',
            h: api.frameHeight-headerPos.h-headerTabPos.h-20
        },
        index: 0,
        frames: [
            {
                name: 'workflow_add',
                url: 'workflow_add_frm.html',
                bounces:false,
                opaque:true,
                bgColor: '#fff'
            },{
                name: 'workflow_list',
                url: 'workflow_list_frm.html',
                bounces:true,
                opaque:true,
                bgColor: '#fff'
            },{
                name: 'workflow_commit',
                url: 'workflow_commit_frm.html',
                bounces:true,
                opaque:true,
                bgColor: '#fff'
            },{
                name: 'workflow_cc',
                url: 'workflow_cc_frm.html',
                bounces:true,
                opaque:true,
                bgColor: '#fff'
            }
            ]
        }, function(ret, err){
            $('#tab').find('div').removeClass('aui-active').eq(ret.index).addClass('aui-active');
        });
    }

    function closeWin(){
        api.closeWin({
        });
    }
</script>
</html>
